<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('设置默认选中')}`">{{ $t('设置默认选中') }}</t>
            <li>
                配置<span class="d-code">selection</span>即可设置默认选中
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ name }) => name).join('、') || '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开弹窗选择器</el-button>
        <el-button @click="handleSelect">手动选中【奔跑的提款机】</el-button>
        <sib-table-picker
            row-key="rowId"
            v-model="visible"
            :selection="selections"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            @confirm="confirm">
        </sib-table-picker>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = [
            { name: '张三', code: '001', rowId: '1' },
            { name: '李四', code: '002', rowId: '2' },
            { name: '王五', code: '003', rowId: '3' },
            { name: '奔跑的提款机', code: '666', rowId: '4' },
            { name: '前端爱好者', code: '004', rowId: '5' },
            { name: '菜鸟', code: '005', rowId: '6' },
            { name: '旗鼓相当的对手', code: '006', rowId: '7' },
        ];
        // 设置初始选中第三条数据
        // eslint-disable-next-line prefer-destructuring
        const row = tableData[2];
        const selections = ref([row]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData,
            confirm(rows) {
                selections.value = rows;
            },
            handleSelect() {
                // eslint-disable-next-line prefer-destructuring
                const rowData = tableData[3];
                // 通过行数据设置默认选中 [rowData1, rowData2, ...]
                selections.value = [rowData];
                // 也可以通过行数据的rowKey设置默认选中 [rowKey1, rowKey2, ...]
                // const rowKey = tableData[3].rowId;
                // selections.value = [rowKey];
            },
            templateString: `<template>
    <p>当前已选择：{{ selections.map(({ name }) => name).join('、') || '--' }}</p>
    <el-button type="primary" @click="visible = true">点击打开弹窗选择器</el-button>
    <el-button @click="handleSelect">手动选中【奔跑的提款机】</el-button>
    <sib-table-picker
        row-key="rowId"
        v-model="visible"
        :selection="selections"
        :search-config="searchConfig"
        :table-column="tableColumn"
        :table-data="tableData"
        @confirm="confirm">
    </sib-table-picker>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = [
            { name: '张三', code: '001', rowId: '1' },
            { name: '李四', code: '002', rowId: '2' },
            { name: '王五', code: '003', rowId: '3' },
            { name: '奔跑的提款机', code: '666', rowId: '4' },
            { name: '前端爱好者', code: '004', rowId: '5' },
            { name: '菜鸟', code: '005', rowId: '6' },
            { name: '旗鼓相当的对手', code: '006', rowId: '7' },
        ];
        // 设置初始选中第三条数据
        const row = tableData[2];
        const selections = ref([row]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData,
            confirm(rows) {
                selections.value = rows;
            },
            handleSelect() {
                const rowData = tableData[3];
                // 通过行数据设置默认选中 [rowData1, rowData2, ...]
                selections.value = [rowData];
                // 也可以通过行数据的rowKey设置默认选中 [rowKey1, rowKey2, ...]
                // const rowKey = tableData[3].rowId;
                // selections.value = [rowKey];
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
